<template>
  <SplitLayout>
    <div slot="top" class="header-top">
      <SearchForm @query="onQuery" @reset="onResetForm" style="margin:20px 0 0 20px;">
        <SearchFormItem label="预警最新时间：" style="width: 360px;">
          <!-- <a-range-picker v-model="rangeTime" @change="onTimeChange" valueFormat="YYYY-MM-DD" style="width: 100%" /> -->
          <span class="date-range-picker">
            <a-date-picker
              v-model="pageFilter.warningStartTime"
              placeholder="开始日期"
              :disabled-date="disabledStartDate"
              valueFormat="YYYY-MM-DD"
              @openChange="handleOpenChange($event, 'start')"
            />
            <span class="line">-</span>
            <a-date-picker
              v-model="pageFilter.warningEndTime"
              placeholder="结束日期"
              :disabled-date="disabledEndDate"
              valueFormat="YYYY-MM-DD"
              :open="endOpen"
              @openChange="handleOpenChange($event, 'end')"
            />
          </span>
        </SearchFormItem>
        <SearchFormItem label="受害人手机号：" style="width: 280px;">
          <a-input v-model="pageFilter.msisdn" placeholder="请输入受害人手机号" />
        </SearchFormItem>
        <SearchFormItem label="数据来源：" style="width: 280px;">
          <!-- <a-input v-model="pageFilter.latestSourceFlag" placeholder="请输入数据来源" /> -->
          <j-dict-select-tag
            v-model="pageFilter.latestSourceFlag"
            placeholder="请选择"
            dictCode="dataSource"
            style="width: 100%"
          />
        </SearchFormItem>
      </SearchForm>
    </div>
    <div class="con-content">
      <div class="con-content-top" :gutter="16" style="display:flex;">
        <downLoadComponents
          ref="downLoadComponents"
          :formData="exportDowmData"
          :apiUrl="downUrl"
          :fileText="fileText + '.xls'"
        >
          <a-button type="primary" @click="onExportDowm">
            导出数据
          </a-button>
        </downLoadComponents>
        <a-button type="primary" @click="onPLPB" :disabled="isSelected" v-has="'operator_earlyWarningPortrait:shield'">
          批量屏蔽
        </a-button>
      </div>
      <div class="con-content-list">
        <CustomTable
          ref="table"
          :showAlert="false"
          :columns="columns"
          :loading="loading"
          :dataSource="pageData"
          :showSelection="true"
          @selectedRowKey="onSelectedRow"
          @change="onTableChange"
          rowKey="victimId"
        >
          <template slot="latestSourceFlag" slot-scope="text">
            {{filterMultiDictText('dataSource', text)}}
          </template>
          <template slot="sysUserName" slot-scope="text">
            <span v-if="text == null">--</span>
            <span v-else>{{ text }}</span>
          </template>
          <template slot="fzVictimTotalList" slot-scope="text, record, index">
            <a-tag :class="tagFlagArr[index] ? 'tagItem' : ''" v-for="item in record.fzVictimTotalList" :key="item.id">
              <j-ellipsis :value="item.fraudType" :length="5" /> : {{ item.totalNum }}
            </a-tag>
            <a-icon
              v-if="tagFlagArr[index] && record.fzVictimTotalList && record.fzVictimTotalList.length >= 5"
              @click="onTabDownClick(index)"
              class="icon"
              type="caret-down"
              theme="outlined"
              :style="{ fontSize: '26px', color: '#08c' }"
            />
            <a-icon
              v-if="!tagFlagArr[index] && record.fzVictimTotalList && record.fzVictimTotalList.length >= 5"
              @click="onTabDownClick(index)"
              class="icon"
              type="caret-up"
              theme="outlined"
              :style="{ fontSize: '26px', color: '#08c' }"
            />
          </template>
          <template slot="action" slot-scope="record">
            <a-space size="large">
              <a @click="onDetail(record.victimId)">详情</a>
              <a-popconfirm
                title="确定恢复劝阻吗?"
                @confirm="() => onDissuade(record)"
                v-if="record.dissuadeStatus == 9"
                v-has="'item_earlyWarningPortrait:dissuasion'"
              >
                <a>恢复劝阻</a>
              </a-popconfirm>
              <a-popconfirm v-has="'item_earlyWarningPortrait:dissuasion'" title="确定屏蔽劝阻吗?" @confirm="() => onDissuade(record)" v-else>
                <a>屏蔽劝阻</a>
              </a-popconfirm>
            </a-space>
          </template>
        </CustomTable>
        <a-modal v-model="modalVisible" title="批量屏蔽" ok-text="确认" cancel-text="取消" @ok="onModalOk">
          <!-- <span style="margin-left:30px;">屏蔽劝阻：</span> -->
          <a-radio-group v-model="operation" name="radioGroup" style="margin-left:100px;">
            <a-radio value="1">
              屏蔽劝阻
            </a-radio>
            <a-radio value="2" style="margin-left:50px;">
              恢复劝阻
            </a-radio>
          </a-radio-group>
        </a-modal>
      </div>
    </div>
  </SplitLayout>
</template>
<script>
import {getDictItemsFromCache} from '@/api/api'
import SearchForm from '@/components/zxd/SearchForm'
const SearchFormItem = SearchForm.Item
import { SplitLayout } from '@/components/zxd/layouts'
import CustomTable from '@/components/zxd/Table/CustomTable'
import downLoadComponents from '@/components/zxd/downLoad'
import { baseUrl, warningPortraitPage, dissuadeShield } from '@/api/warning/Portrait.js'
export default {
  components: {
    SearchForm,
    SearchFormItem,
    CustomTable,
    SplitLayout,
    downLoadComponents
  },
  data() {
    return {
      pageData: [],
      loading: false,
      endOpen: false,
      columns: [
        {
          title: '受害人手机号',
          dataIndex: 'msisdn',
          align: 'center',
          scopedSlots: { customRender: 'msisdn' }
        },
        {
          title: '诈骗类型累计次数',
          dataIndex: 'fzVictimTotalList',
          align: 'left',
          width: '40vh',
          scopedSlots: { customRender: 'fzVictimTotalList' }
        },
        {
          title: '预警总计',
          dataIndex: 'warningTotal',
          align: 'center',
          sorter: (a, b) => a.warningTotal - b.warningTotal
        },
        {
          title: '劝阻累计次数',
          dataIndex: 'dissuadedTotal',
          align: 'center',
          sorter: (a, b) => a.dissuadedTotal - b.dissuadedTotal
        },
        {
          title: '劝阻账号',
          dataIndex: 'sysUserName',
          align: 'center',
          scopedSlots: { customRender: 'sysUserName' }
        },
        {
          title: '数据来源',
          dataIndex: 'latestSourceFlag',
          align: 'center',
          scopedSlots: { customRender: 'latestSourceFlag' }
        },
        {
          title: '预警最新时间',
          dataIndex: 'earlyWarningTime',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
          width: 140
        }
      ],
      pageFilter: {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      },
      exportDowmData: {victimIdList:[]},
      rangeTime: undefined,
      fileText: '预警人员列表',
      downUrl: `${baseUrl}/fzVictimBase/exportXls`,
      modalVisible: false,
      tagFlagArr: [],
      isSelected: true,
      operation: '1',
      totalListArr: [],
      maxTotal: 0
    }
  },
  mounted() {
    this.refreshTable()
  },
  methods: {
    onSelectedRow(keys) {
      this.exportDowmData = {
        warningEndTime: this.pageFilter.warningEndTime,
        warningStartTime: this.pageFilter.warningStartTime,
        msisdn: this.pageFilter.msisdn,
        latestSourceFlag: this.pageFilter.latestSourceFlag,
        exportSize: this.$refs.table.getSelectedRowKeys().length,
        victimIdList: keys
      }
      this.isSelected = keys.length > 0 ? false : true
    },
    onTabDownClick(index) {
      this.$set(this.tagFlagArr, index, !this.tagFlagArr[index])
    },
    onTimeChange(date, dateString) {
      this.pageFilter.warningStartTime = dateString[0]
      this.pageFilter.warningEndTime = dateString[1]
      this.rangeTime = date
    },
    // 预警最新时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.warningEndTime
        ? this.$JMoment(this.pageFilter.warningEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 预警最新时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.pageFilter).length > 0 && this.pageFilter.warningStartTime
      ? this.$JMoment(this.pageFilter.warningStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 预警最新时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    },
    refreshTable() {
      this.loading = true
      warningPortraitPage(this.pageFilter)
        .then(res => {
          if (res.success) {
            this.pageData = res.result
            if (this.pageData.records.length > 0) {
              this.totalListArr = []
              this.pageData.records.forEach(item => {
                this.tagFlagArr.push(true)
                //每条数据个数放到数组，然后找出个数最多值
                this.totalListArr.push(item.fzVictimTotalList.length)
              })
              this.maxTotal = this.totalListArr.reduce(function(a, b) {
                return b > a ? b : a
              })
              //根据最大个数设置列的长度
              this.setColumns(this.maxTotal)
            }
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {
          this.loading = false
        })
    },
    onQuery() {
      this.$refs.table.onClearRowKeys()
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.$refs.table.onClearRowKeys()
      this.rangeTime = undefined
      this.pageFilter = {
        pageNo: 1, // 当前页数
        pageSize: 10 // 每页显示几条数据
      }
      this.refreshTable()
    },
    onExportDowm() {
      this.$refs.downLoadComponents.exportDowmPOST()
      this.$refs.table.onClearRowKeys()
    },
    onPLPB() {
      this.modalVisible = true
    },
    onModalOk() {
      let userList = []
      this.$refs.table.selectedRows.forEach(item => {
        this.$refs.table.selectedRowKeys.forEach(i => {
          if (item.victimId === i) {
            userList.push({ victimId: item.victimId, msisdn: item.msisdn })
          }
        })
      })
      dissuadeShield({ operation: this.operation, userList: userList })
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
            this.$refs.table.onClearRowKeys()
            this.pageFilter = {
              pageNo: 1, // 当前页数
              pageSize: 10 // 每页显示几条数据
            }
            this.refreshTable()
            this.modalVisible = false
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {})
    },
    onTableChange(obj) {
      // console.log(obj.sortField)
      // console.log(obj.sortOrder)
      // if (obj.sortField == 'warningTotal') {
      //   if (obj.sortOrder == 'ascend') {
      //     this.pageFilter.sort = 'asc'
      //   } else {
      //     this.pageFilter.sort = 'desc'
      //   }
      // }
      this.pageFilter.pageNo = obj.currentPage
      this.pageFilter.pageSize = obj.pageSize
      this.refreshTable()
    },
    onDetail(value) {
      this.$router.push({
        path: '/earlyWarning/portrait/detail',
        query: {
          victimId: value
        }
      })
    },
    onDissuade(record) {
      dissuadeShield({
        operation: record.dissuadeStatus === 9 ? 2 : 1,
        userList: [{ victimId: record.victimId, msisdn: record.msisdn }]
      })
        .then(res => {
          if (res.success) {
            this.refreshTable()
          } else {
            this.$message.warning(res.message ? res.message : '请求失败！')
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
        .finally(() => {})
    },
    setColumns(num) {
      setTimeout(() => {
        if (num == 1) {
          this.$set(this.columns, 1, {
            title: '诈骗类型累计次数',
            dataIndex: 'fzVictimTotalList',
            align: 'left',
            width: '20vh',
            scopedSlots: { customRender: 'fzVictimTotalList' }
          })
        }
        if (num == 2) {
          this.$set(this.columns, 1, {
            title: '诈骗类型累计次数',
            dataIndex: 'fzVictimTotalList',
            align: 'left',
            width: '32vh',
            scopedSlots: { customRender: 'fzVictimTotalList' }
          })
        }
        if (num == 3) {
          this.$set(this.columns, 1, {
            title: '诈骗类型累计次数',
            dataIndex: 'fzVictimTotalList',
            align: 'left',
            width: '45vh',
            scopedSlots: { customRender: 'fzVictimTotalList' }
          })
        }
        if (num >= 4) {
          this.$set(this.columns, 1, {
            title: '诈骗类型累计次数',
            dataIndex: 'fzVictimTotalList',
            align: 'left',
            width: '60vh',
            scopedSlots: { customRender: 'fzVictimTotalList' }
          })
        }
      }, 200)
    },
    filterMultiDictText(dictCode, text) {
      if(!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
  }
}
</script>
<style scoped lang="less">
.con-content-top {
  margin-bottom: 20px;
}
/deep/#advance-btn {
  display: none;
}
.con-content-top button {
  margin-right: 15px;
}

.zt {
  display: inline-block;
  width: 70px !important;
  padding: 5px 0;
  border-radius: 5px;
}
.zt1 {
  background-color: #00bfbf;
}
.zt2 {
  background-color: #1890ff;
}
.zt3 {
  background-color: #ea9d37;
}
.zt4 {
  color: #d9001b;
  border: 1px solid #d9001b;
  text-align: center;
}
.zt5 {
  color: #999;
  border: 1px solid #999;
  text-align: center;
}
/deep/ .ant-tag {
  width: 6vw;
  text-align: center;
}

/deep/ .ant-tag {
  margin-top: 10px;
}
/deep/ .tagItem:nth-child(n + 5) {
  display: none;
}
.icon {
  position: absolute;
  right: 0;
  top: 24px;
}
/deep/ .ant-table td {
  position: relative;
  .t0 {
    position: absolute;
    top: 16px;
    left: 34.2%;
    color: #1890ff;
  }
}
.table_box {
  width: 900px;
  tr {
    .t1 {
      min-width: 10vh;
    }
    .t2 {
      width: 30vh;
      text-align: left;
    }
  }
  tr:nth-child(1) {
    .t2:nth-child(2) {
      color: #d9001b;
    }
  }
}

.date-range-picker {
  // width: 280px;
  display: inline-flex;
  align-items: center;
  .ant-calendar-picker {
    min-width: 47% !important;
  }
  .line {
    padding: 0 4px;
  }
}
</style>
